<template>
  <el-config-provider :locale="messages[locale]">
    <el-container class="container">
      <el-aside
        class="aside"
        :style="{ transform: menuVisable ? 'translateX(0)' : '' }"
      >
        <div class="avatar" @click="handleClickAvatar">
          <el-avatar
            :size="70"
            shape="square"
            :src="store.userInfo?.avatar || defaultAvatar"
            @error="store.userInfo.avatar = defaultAvatar"
          />
          <el-text size="large" class="name">{{
            store.userInfo?.username ?? t("unlogin")
          }}</el-text>
        </div>

        <el-menu
          :default-active="activeIndex"
          :router="true"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          class="menu"
        >
          <template v-if="!store.userInfo?.username">
            <el-menu-item index="/login">
              <el-icon><User /></el-icon>
              <span>{{ t("login") }}</span>
            </el-menu-item>
            <el-menu-item index="/register">
              <el-icon><Compass /></el-icon>
              <span>{{ t("register") }}</span>
            </el-menu-item>
          </template>
          <template v-else>
            <el-menu-item index="/home">
              <el-icon><House /></el-icon>
              <span>{{ t("router.home") }}</span>
            </el-menu-item>
            <el-menu-item index="/share">
              <el-icon><Link /></el-icon>
              <span>{{ t("router.share") }}</span>
            </el-menu-item>
            <el-menu-item index="/recycle">
              <el-icon><Delete /></el-icon>
              <span>{{ t("router.recycle") }}</span>
            </el-menu-item>
            <el-menu-item index="/setting">
              <el-icon><Setting /></el-icon>
              <span>{{ t("router.setting") }}</span>
            </el-menu-item>
            <el-menu-item index="/admin" v-if="store.userInfo?.role == 'ADMIN'">
              <el-icon><PieChart /></el-icon>
              <span>后台管理</span>
            </el-menu-item>
          </template>
        </el-menu>
        <div class="progress" v-if="store.userInfo?.username">
          <el-progress
            :text-inside="true"
            :stroke-width="5"
            :percentage="
              Math.floor((store.userInfo?.used / store.userInfo?.storage) * 100)
            "
          />
          <el-text class="space-size"
            >{{ formatFileSize(store.userInfo?.used) }} /
            {{ formatFileSize(store.userInfo?.storage) }}</el-text
          >
        </div>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div class="logo">
            <el-icon :size="45" color="#87CEEB" class="icon"
              ><MostlyCloudy
            /></el-icon>
            <h1>CloudDrive</h1>
          </div>
          <el-dropdown>
            <el-button link>{{ t("language") }}</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="changeLang('zh-CN')"
                  >中文</el-dropdown-item
                >
                <el-dropdown-item @click="changeLang('en')"
                  >English</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-icon
            :size="30"
            class="menu-icon"
            @click="menuVisable = !menuVisable"
          >
            <Expand v-show="!menuVisable" />
            <Fold v-show="menuVisable" />
          </el-icon>
        </el-header>
        <el-scrollbar> 
          <el-main class="main" @click.stop="onClickMain">
            <router-view />
          </el-main>
        </el-scrollbar>
        <el-footer class="footer">
          <el-text>{{ t("websiteInfo") }}</el-text>
        </el-footer>
      </el-container>
    </el-container>
  </el-config-provider>
</template>
<script setup>
import { ref, watch } from "vue";
import { useStore } from "./stores";
import { useRouter, useRoute } from "vue-router";
import { formatFileSize } from "./utils/FormatUtil";
import { useI18n } from "vue-i18n";
const defaultAvatar =
  "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";

const { t, locale, messages } = useI18n();
const changeLang = (lang) => {
  locale.value = lang;
  localStorage.setItem("locale", lang);
};

const store = useStore();
const router = useRouter();
const route = useRoute();

const activeIndex = ref(route.path);
const menuVisable = ref(false);

watch(
  () => route.path,
  (newPath) => {
    activeIndex.value = newPath;
  }
);

const handleClickAvatar = () => {
  if (!store.userInfo) return;
  router.push("setting");
};
const onClickMain = () => {
  if (menuVisable.value) {
    menuVisable.value = false;
  }
};
</script>
<style scoped>
.container {
  height: 100vh;
}
.aside {
  background-color: #545c64;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  margin-right: -1px;
  z-index: 10;
}
.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.name {
  margin-top: 10px;
  color: #fff;
}
.menu {
  width: 100%;
}

:deep(.el-menu) {
  border-right: none;
}
.progress {
  width: 80%;
  margin-top: auto;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.space-size {
  color: #fff;
  text-align: center;
  margin-top: 10px;
}

.header {
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}
.icon {
  margin-right: 10px;
}
.main {
  background-color: #fcfcfc;
  padding: 10px;
  height: 100%;

}

.footer {
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-icon {
  display: none; /* 初始时隐藏菜单图标 */
}

/* 移动端样式 */
@media (max-width: 767px) {
  .aside {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .menu-icon {
    display: block;
  }
  .footer {
    display: none;
  }
}
</style>
